Day 2：【高階商務計算機】0.5px 髮絲紋與單通道毛玻璃——液態玻璃 (Liquid Glass) CSS/SVG 渲染

18th鐵人賽

shaoan_1211

2026-09-05 10:29:55

71 瀏覽

分享至

在追求極致 Web App 體驗的道路上，視覺表現決定了使用者的第一印象。傳統 Web 計算機往往給人一種「網頁工具」的廉價感，主因在於缺乏現代原生作業系統（如 iOS 18）中那種帶有體積感與光線折射的「液態玻璃 (Liquid Glass)」質感。
簡單的 backdrop-filter: blur(10px) 雖然能製造模糊效果，卻常伴隨三大痛點：GPU 記憶體過載、動態色彩沉悶、以及缺乏透光晶體的立體光學邊界。今天我們將解析如何在 Google Antigravity IDE 中，透過 Gemini 的效能與視覺評估，打造出具備高品質的液態玻璃光學渲染效果！

一、技術痛點：為什麼你的毛玻璃看起來像塊塑料？

大多數 Web 開發者在實作 Glassmorphism（新擬物毛玻璃）時，只使用了基礎的透明度與模糊：

/* ❌ 傳統、廉價的模糊寫法 */
.bad-glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid white;
}

這種寫法有三個致命缺點：

邊框過粗與模糊沉悶：在 Retina 高解析度螢幕上，1px 實線邊框顯得極度笨重；且單純 blur 會將背景顏色混合拉灰，失去原有的鮮豔度。
缺乏光學深度：沒有模擬光線穿過玻璃時發生的「頂部邊緣反射」、「底部折射」以及「體積漫反射 (Volumetric Scattering)」。
無層次感的純面模糊：未對按鍵、面板與下拉選單進行光學分級，導致整體介面缺乏視覺焦點與體積厚度。

二、解決方案 (The Hero: Google AI 的效能取捨決策)

在開發早期，我們曾嘗試引入 SVG 分形噪點濾鏡 (feDisplacementMap) 來模擬強烈的液態不規則折射。然而在行動裝置高頻互動時，SVG 複合濾鏡會引發極高 GPU 繪製負擔（Overdraw）。

在 Google Antigravity IDE 中，我們將渲染效能數據提交給 Gemini Agent 進行評估。Gemini 給出了關鍵架構建議：「採用純 CSS 多重光學投影替代高消耗 SVG 折射，兼顧極致視覺與低 GPU 負擔。」

高飽和度光學補償 (saturate(190%))：利用色彩飽和度提升，強效還原並強化因模糊而遺失的背景色彩細節。
多重內嵌光學投影 (Inset Multi-Shadow)：利用多組 inset 陰影，用零效能成本的 CSS 代替昂貴的 3D 渲染，模擬頂部 0.5px 髮絲紋高光（在 Retina 螢幕精準對應 1 實體像素）與內部漫反射。
預留 SVG 光學架構：在 DOM 中保留 SVG 濾鏡定義，但渲染主力交由純 CSS 廣域圖層完成，確保視覺品質與效能平衡。

三、代碼精華：極致光學 CSS 與零效能負擔渲染

膠囊面板與 0.5px 髮絲紋光線折射

透過雙重半透明邊框與多重 inset box-shadow，我們用幾行純 CSS 構建出具備立體厚度與光感流轉的微晶體面板：

.capsule {
    background: linear-gradient(180deg, rgba(28, 34, 52, 0.45) 0%, rgba(16, 20, 32, 0.55) 100%);
    -webkit-backdrop-filter: blur(14px) saturate(190%); 
    backdrop-filter: blur(14px) saturate(190%);
    border-radius: 40px; 
    padding: var(--capsule-padding-y) 4px;
    /* 🍏 晶體邊框與流線光影 (Retina 螢幕 0.5px 髮絲紋高光) */
    border: 0.5px solid rgba(255, 255, 255, 0.18);
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.25),
        0 10px 24px rgba(0, 0, 0, 0.35),
        inset 0 0.5px 0 rgba(255, 255, 255, 0.35),   /* 頂部 0.5px 極細入射光高光條 */
        inset 0 -0.5px 0 rgba(255, 255, 255, 0.12),  /* 底部折射暗影 */
        inset 0 0 12px rgba(255, 255, 255, 0.08);   /* 內部體積漫反射 */
    /* 硬體加速與圖層隔離 */
    will-change: transform;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

微晶體按鍵 (Glass Key Button)

計算機的圓形按鍵透過 aspect-ratio: 1 / 1 與微小的內發光，呈現出如水晶珍珠般觸感：

.key {
    background: var(--card-bg); /* rgba(255, 255, 255, 0.045) */
    border: var(--capsule-border); /* 0.5px solid rgba(255, 255, 255, 0.12) */
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    transition: transform 0.16s cubic-bezier(0.175, 0.885, 0.32, 1.275), 
                filter 0.14s ease, 
                background-color 0.14s ease, 
                box-shadow 0.14s ease;
    /* 立體玻璃邊緣與微晶體透光效果 */
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.22), 
        inset 0 0.5px 0 rgba(255, 255, 255, 0.35),
        inset 0 -0.5px 0 rgba(255, 255, 255, 0.1),
        inset 0 0 8px rgba(255, 255, 255, 0.06);
    will-change: transform, filter;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

SVG 光學折射濾鏡底層預留 (Optical Defs)

我們在 HTML 底層依然封裝了光學折射定義，供高階設備特效擴充使用：

<!-- SVG Optical Filter Definitions for Apple Liquid Glass Refraction -->
<svg class="liquid-glass-svg-defs" aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none;">
    <defs>
        <!-- 通用液態玻璃濾鏡備份定義 -->
        <filter id="liquid_glass_filter" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
            <feTurbulence type="fractalNoise" baseFrequency="0.003" numOctaves="2" seed="7" result="noise" />
            <feGaussianBlur in="noise" stdDeviation="1.5" result="map" />
            <feDisplacementMap in="SourceGraphic" in2="map" scale="28" xChannelSelector="R" yChannelSelector="B" />
        </filter>
    </defs>
</svg>

四、Google 生態系與 GPU 圖層隔離最佳化

要讓這套精美的液態玻璃視覺擁有極佳的渲染效率，關鍵在於視覺質感不能造成 CPU 主執行緒的負擔。

在 Google Antigravity IDE 中進行 Prompt 調校時，Gemini 建議將所有玻璃元件透過 CSS 獨立為專屬渲染圖層：

will-change: transform, filter;：提前告知 Chrome 瀏覽器的 Blink 渲染引擎為此元素開闢獨立圖層分頁。

transform: translate3d(0, 0, 0);：觸發圖層隔離，避免玻璃面板與周圍其他 UI 元素產生不必要的渲染重疊。

backface-visibility: hidden;：確保光學透光層在渲染時消除微小鋸齒與邊緣瑕疵。

明日預告與重大發布：體驗「觸手可及」的實體按鍵震感！

在下一篇 Day 3 中，我們將直面所有前端工程師的噩夢——「iOS Safari 封殺 navigator.vibrate 震動 API」。我們將揭秘如何運用 Web Audio API 打造超低延遲（14ms）的「聲學微脈衝觸覺回饋雙引擎」！
同場加映預告：
收到許多開發者敲碗詢問想親手操作，明天我們將正式公開線上體驗版 Live Demo 與開源倉庫網址！
大家明天就能直接拿起 iPhone 或 Android 手機，一鍵加入主畫面 (PWA)，親自體驗 120FPS 滿幀與敲擊玻璃的真實手感！敬請期待 Day 3！